import {useRequest} from '@umijs/hooks'
import {Button, Descriptions, Form, Input, message, Modal, Spin, Table, Tag, Transfer} from 'antd'
import difference from 'lodash/difference'
import React, {useEffect, useState} from 'react'
import cookie from "react-cookies"
import {useDispatch, useSelector} from 'react-redux'
import Zmage from 'react-zmage'
import {getOriginString} from '../../../../utils/encrypt'
import getImgInfo from '../../../../utils/getImgInfo'
import {fetchRequest} from '../../../../utils/Request'
import {url} from '../../../../utils/url'
import actionTypes from '../../actionTypes'
import '../index.css'


// interface PicInfo {
//     fileStoreName: string,
//     fileRealName: string
// }


interface ApprovalParams {
    userId: number,
    state: number,
    remark: string
}

interface RequestParams {
    state: number,
    "userId": number
}


const type = {
    2: {text: "告警", color: "#fdec38"},
    3: {color: "#0ec671", text: "正常"},
    1: {color: "#f50206", text: "危险"},
    4: {color: undefined, text: "未知"},
    5: {color: undefined, text: "科道接口调用失败"},
    6: {color: undefined, text: ""}
}

export default function RegisterAppoval(props: any) {
    const [visible, setvisible] = useState(false)

    const [disagreeVisible, setdisagreeVisible] = useState(false)

    // const [isWhite, setisWhite] = useState({ isWhite: props.content.whiteCardCode !== null && props.content.whiteCardCode !== "" && typeof props.content.whiteCardCode !== "undefined" })


    const [healCode, sethealCode] = useState<{ healCode: 1 | 2 | 3 | 4 | 5 | 6, healStateName: string }>({
        healCode: 3,
        healStateName: ""
    })

    const [form] = Form.useForm()

    const [whiteForm] = Form.useForm()

    const [detail, setdetail] = useState<any>()

    //得到详情的接口
    async function getDetailInfo(params: RequestParams) {
        console.log("获取detail")
        console.log(params)
        try {
            const json = await fetchRequest(url.GET_REGISTER_DETAIL, params);
            if (json.success) {
                console.log("详情获取");
                console.log(json);
                setdetail(json.data[0])
            } else {
                message.destroy();
                message.error(json.error)
            }
        } catch (error:any) {
            message.destroy();
            message.error(error.message);
        }
    }

    const getDetail = useRequest(getDetailInfo, {
        loadingDelay: 200,
        manual: true
    })

    useEffect(() => {
        const params: RequestParams = {
            state: props.content.state,
            userId: props.content.userId
        }
        getDetail.run(params)
    }, [])


    //点击不同意的时候
    function onDisagree() {
        form.submit()
    }

    const dispatch = useDispatch()


    //点击确认的请求
    function onOk() {

        const data: any[] = [];
        // if(isWhite.isWhite){
        const params: any = {
            userId: props.content.userId,
            state: 1,
            remark: ""
        }

        approval.run(params)
        // }
    }

    //审核的接口
    async function approvalAccess(params: ApprovalParams) {
        try {
            const json = await fetchRequest(url.REGISTER_ACCESS_URL, params);
            if (json.success) {
                message.destroy();
                message.success("审核成功!")
                if (params.state === 1) {
                    props.onApproval();
                    setvisible(false);
                } else {
                    props.onApproval();
                    setdisagreeVisible(false)
                }
            } else {
                message.destroy();
                message.error(json.error);
            }
        } catch (error:any) {
            message.destroy();
            message.error(error.message)
        }
    }


    const approval = useRequest(approvalAccess, {
        manual: true,
        loadingDelay: 200
    })


    //得到显示字段
    function getDisplayItem(data: any) {
        if (data === "" || typeof data === "undefined" || data === null)
            return "--"
        return data
    }

    // function getImgSet(data: PicInfo[]): any[] {
    //     const imgSet: any[] = [];
    //
    //     data.map((item: PicInfo) => {
    //         imgSet.push({ src: url.REGISTER_ATTACHMENT_URL + 'accessToken=' + getImgInfo(item.fileStoreName), alt: "加载错误" })
    //     })
    //
    //     return imgSet
    // }


    const disagreeFunc = useRequest(approvalAccess, {
        manual: true
    })

    function onSubmit(value: any) {
        const params = {
            userId: props.content.userId,
            state: 3,
            remark: value.remark
        }
        disagreeFunc.run(params)
    }

    // console.log("当前状态")
    // console.log(props.content.state)

    // @ts-ignore
    return (
        <Spin spinning={getDetail.loading}>
            {detail === null || typeof detail === "undefined" ? null : <div>
                <Descriptions bordered title="人员基本信息">
                    <Descriptions.Item label="姓名">{getDisplayItem(detail.studentName)}</Descriptions.Item>
                    <Descriptions.Item label="性别">{getDisplayItem(detail.sex)}</Descriptions.Item>
                    <Descriptions.Item label="联系电话">{getDisplayItem(detail.phone)}</Descriptions.Item>
                    <Descriptions.Item label="证件号码">{getDisplayItem(detail.certNum)}</Descriptions.Item>
                    <Descriptions.Item label="组织机构">{getDisplayItem(detail.deptName)}</Descriptions.Item>
                    <Descriptions.Item label="编号">{getDisplayItem(detail.studentId)}</Descriptions.Item>
                     @ts-ignore
                    <Descriptions.Item label="防疫核验"><Tag color={detail.healthCode === undefined ?
                        undefined : detail.healthCode.color}>{detail.healthCode === undefined ? "" :
                        detail.healthCode.stateName}</Tag>
                    </Descriptions.Item>
                    <Descriptions.Item label="防疫核验刷新时间">{getDisplayItem(detail.healthCode.date)}</Descriptions.Item>
                    <Descriptions.Item label="人脸照片" span={3}>
                        {detail.photo === null || typeof detail.photo ===
                        "undefined" ? null : <img width="80" src={url.GET_PERSON_FACE_URL +
                        'accessToken=' + getImgInfo(detail.photo)} style={{cursor: 'pointer'}} onClick={() =>
                            Zmage.browsing({src: url.GET_PERSON_FACE_URL + 'accessToken=' + getImgInfo(detail.photo)})}/>}</Descriptions.Item>


                    <Descriptions.Item label="身份证正面" span={3}>
                        {detail.frontPicStoreName === null || typeof detail.frontPicStoreName ===
                        "undefined" ? null : <img width="80" src={url.GET_Cert_Photo +
                        'accessToken=' + getImgInfo(detail.frontPicStoreName)} style={{cursor: 'pointer'}}
                                                  onClick={() =>
                                                      Zmage.browsing({src: url.GET_Cert_Photo + 'accessToken=' + getImgInfo(detail.frontPicStoreName)})}/>}</Descriptions.Item>


                    <Descriptions.Item label="身份证反面" span={3}>
                        {detail.backPicStoreName === null || typeof detail.backPicStoreName ===
                        "undefined" ? null : <img width="80" src={url.GET_Cert_Photo +
                        'accessToken=' + getImgInfo(detail.backPicStoreName)} style={{cursor: 'pointer'}} onClick={() =>
                            Zmage.browsing({src: url.GET_Cert_Photo + 'accessToken=' + getImgInfo(detail.backPicStoreName)})}/>}</Descriptions.Item>

                    <Descriptions.Item label="不通过原因"
                                       style={props.content.state === 3 ? undefined : {display: 'none'}}>{getDisplayItem(detail.remark)}</Descriptions.Item>


                </Descriptions>


                <br/>
                <br/>
                <br/>
                <div style={props.content.state === 2 ? {textAlign: 'center'} : {display: 'none'}}>
                    <Button style={{marginRight: '8px'}} type="primary" onClick={() => {
                        onOk()
                        // getManagerDevice.run()
                    }}>通过</Button>
                    <Button danger onClick={() => setdisagreeVisible(true)}>不通过</Button>
                </div>
                <br/>
                <Modal destroyOnClose centered visible={disagreeVisible} title="不通过原因" onOk={onDisagree}
                       onCancel={() => setdisagreeVisible(false)}>
                    <Form form={form} onFinish={onSubmit}>
                        <Form.Item name="remark" rules={[{required: true, message: "必须要填写回退原因"}]}>
                            <Input.TextArea rows={5}/>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>}

        </Spin>
    )
}
